<template>
    <div ref="eCharts" style="height: 100%"></div>
</template>

<script>
    import BaseCharts from "./BaseCharts";
    export default {
        name: "BarCharts",
        mixins:[BaseCharts],
        mounted(){
            this.$nextTick(function (){
                this.drawBar();
            })
        },
        methods:{
            drawBar(){
                var  option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };

                this.drawCharts(option);

            }
        }
    }
</script>

<style scoped>

</style>